<template>
  <div class="sessions">
    <!-- <VideoModal :showVideoModal="showVideoModal" @closeModal="closeModal">
      <template v-slot:contents>
        <div class="videos">
          <div class="video-box">
            <template v-for="(tokenInfo, index) in allTokens">
              <ObserverVideo
                :token="tokenInfo.token"
                :agentNo="tokenInfo.agentNo"
                :key="tokenInfo.token"
              >
                <template v-slot:checkbox>
                  <Radio
                    class="check"
                    v-model="tokenInfo.isChoose"
                    @on-change="chooseVideo($event, index)"
                  ></Radio>
                </template>
              </ObserverVideo>
            </template>
          </div>
          <div class="view-btn">
            <Button
              class="view-info"
              :class="videoData.length === 0 ? 'deactive' : 'active'"
              :disabled="videoData.length === 0 || !isClickVideo"
              @click="viewSessionInfo"
              >查看详情</Button
            >
          </div>
        </div>
      </template>
    </VideoModal> -->
    <!-- <h3>实时视频监控</h3>
    <div class="search-box">
      <Input
        v-model="checkInfo.sessionId"
        placeholder="工单流水号"
        class="search"
      />
      <DatePicker
        class="search"
        type="datetime"
        placeholder="拨号开始时间"
        confirm
         @on-change="callStartChange"
        @on-clear="callStartClear"
        @on-ok="callStartOk"
      ></DatePicker>
      <DatePicker
        class="search"
        type="datetime"
        placeholder="通话开始时间"
        confirm
        @on-change="dialStartChange"
        @on-clear="dialStartClear"
        @on-ok="dialStartOk"
      ></DatePicker>
      <Input
        v-model="checkInfo.agentId"
        placeholder="座席工号"
        class="search"
      />
      <Select
        v-model="checkInfo.groupId"
        class="search"
        placeholder="选择业务类型"
      >
        <Option
          v-for="item in serviceTypeList"
          :value="item.id"
          :key="item.id"
          >{{ item.name }}</Option
        >
      </Select>
      <Select v-model="isRobot" class="search" placeholder="选择座席类型">
        <Option
          v-for="item in agentTypeList"
          :value="item.value"
          :key="item.value"
          >{{ item.label }}</Option
        >
      </Select>
      <button class="search-btn" @click="searchSession">检索</button> -->
    <!-- </div> -->
    <Button type="primary" class="btn" @click="getSessionsListInit">刷新</Button>
    <div class="table-box">
      <Table
        stripe
        border
        :columns="tableTitles"
        :data="tableConents"
        @on-selection-change="selectSession"
      ></Table>
    </div>
    <br>
    <Page
      :total="total"
      show-sizer
      show-elevator
      show-total
      @on-change="changePage"
      @on-page-size-change="changePageSize"
    />
  </div>
</template>

<script>
// import VideoModal from './VideoModal.vue';
import moment from 'moment';
import { getSessionsList,getRoomToken} from '../api/api';
// import ObserverVideo from './ObserverVideo.vue';
export default {
  name: 'sessions',
  components: {
    // VideoModal,
    // ObserverVideo
  },
  data() {
    return {
      // 查询信息参数
      checkInfo: {
        page: 1,
        pageSize: 10,
        startCallTime: '',
        startDialingTime: '',
        agentId: '',
        groupId: '',
        isRobot: '',
        sessionId: ''
      },
      total: 0,
      videoData: [],
      allTokens: [],
      remoteStream: [],
      isClickVideo: false,
      checkList: [],
      roomsId: [],
      isRobot: '',
      showVideoModal: false,
      serviceTypeList: [],
      agentTypeList: [
        { label: '数字人', value: '数字人' },
        { label: '人工', value: '人工' }
      ],
      tableTitles: [
        // {
        //   type: 'selection',
        //   width: 10,
        //   align: 'center'
        // },
        {
          title: '序号',
          type: 'index',
          width:100,
          align: 'center'
        },
        {
          title: 'sessionId',
          key: 'serviceNo',
          align: 'center'
        },
        {
          title: '拨号开始时间',
          key: 'startDialingTime',
          align: 'center'
        },
        // {
        //   title: '通话开始时间',
        //   key: 'acceptedTime',
        //   align: 'center'
        // },
        {
          title: '座席工号',
          key: 'agentNo',
          align: 'center'
        },
        {
          title: '座席类型',
          key: 'agentType',
          align: 'center'
        },
       {
                        title: '操作',
                        key: 'action',
                        width: 300,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary'
                                    },
                                    style: {
                                        marginRight: '5px',
                                    },
                                    on: {
                                        click: () => {
                                            this.joinSession(params.index)
                                        }
                                    }
                                }, '加入会话'),
                            ]);
                        }
                    }
      ],
      tableConents: []
    };
  },
  mounted() {
    this.checkInfo.isRobot = '';
    this.getSessionsListInit();
  },
  methods: {
    getSessionsListInit() {
      getSessionsList(this.checkInfo)
        .then((res) => {
          console.log(res);
          if (res.status === 200) {
            this.serviceTypeList = res.data.data.groupList;
            const tableArr = res.data.data.data;
            this.total = res.data.data.total
            this.tableConents = tableArr.map((item) => {
              return {
                serviceNo: item.sessionId,
                acceptedTime: moment(item.acceptedTime).format('YYYY-MM-DD HH:mm:ss'),
                agentNo: item.agentInfo.name,
                startDialingTime: item.startDialingTime,
                roomid: item.roomId,
                agentType: (item.agentInfo && item.agentInfo.profile && item.agentInfo.profile.isRobot) ? '数字人' : '人工',
                // serviceName: this.serviceTypeList.filter(
                //   (group) => group.id === item.group
                // )[0].name
              };
            });
          }
        })
        .catch((error) => {
          console.log(error);
          this.$Message.error('获取数据失败');
        });
    },

    joinSession(index){
       console.log(index);
       console.log(this.tableConents[index]);
       let item = this.tableConents[index];
       this.$emit('joinSession',{
              sessionId:item.serviceNo,
       })
      //  getRoomToken(item.roomid,'genesys')
      //     .then((res) => {
      //       console.log(res);
      //       let roomToken = res.data;
      //       // this.allTokens.push({
      //       //   token: res.data,
      //       //   agentNo: item.agentNo,
      //       //   isChoose: '',
      //       //   serviceNo: item.serviceNo
      //       // });
      //       this.$emit('joinSession',{
      //         sessionId:item.serviceNo,
      //         roomToken:roomToken,
      //         roomId:item.roomid
      //       })
      //     })
      //     .catch((error) => {
      //         console.log(error);
      //         this.$Message.error('加入会话失败');
      //     });
    },

    // 通话时间
    dialStartChange(date) {
      this.checkInfo.startDialingTime = date ? moment(date).toISOString() : '';
    },
    dialStartClear() {},
    dialStartOk() {},

    // 开始拨号时间
    callStartChange(date) {
      this.checkInfo.startCallTime = date ? moment(date).toISOString() : '';
    },
    callStartClear() {},
    callStartOk() {},
    // 分页查询
    /*选择那一页*/
    changePage(page) {
      console.log(page);
      this.checkInfo.page = page;
      this.getSessionsListInit();
    },

    /*修改页大小*/
    changePageSize(pageSize) {
      this.checkInfo.pageSize = pageSize;
      this.getSessionsListInit();
    },
    // 筛选查询
    searchSession() {
      if (this.isRobot === '') {
        this.checkInfo.isRobot = '';
      } else {
        this.isRobot === '人工'
          ? (this.checkInfo.isRobot = false)
          : (this.checkInfo.isRobot = true);
      }
      this.getSessionsListInit();
    },

    // 勾选通话记录
    selectSession(selection) {
      this.videoData = selection;
    },

    // 服务监控
    // viewService() {
    //   this.showVideoModal === true
    //     ? (this.showVideoModal = false)
    //     : (this.showVideoModal = true);

    //   this.videoData.forEach((item) => {
    //     console.log(item);
    //     getRoomToken(item.roomid)
    //       .then((res) => {
    //         console.log(res);
    //         this.allTokens.push({
    //           token: res.data,
    //           agentNo: item.agentNo,
    //           isChoose: '',
    //           serviceNo: item.serviceNo
    //         });
    //       })
    //       .catch((error) => {
    //         this.$requestApiError(error.response, () => {});
    //       });
    //     console.log(this.allTokens);
    //   });
    // },

    // 关闭视频模态框
    closeModal() {
      this.showVideoModal = false;
      this.allTokens = [];
       this.isClickVideo = false
    },

    // 选择的视频
    chooseVideo(e, index) {
       this.isClickVideo = true
      this.allTokens.forEach((item, curindex) => {
        if (index !== curindex) {
          item.isChoose = false;
        }
      });
    },

    // 查看当前视频详细信息
    viewSessionInfo() {
      let session = this.allTokens.filter((item) => item.isChoose === true)[0].serviceNo;
      let routerdata = this.$router.resolve({
        name: 'session'
      });
      let newhref = routerdata.href + '?sessionId=' + session;
      window.open(newhref, session);
    }
  }
};
</script>

<style  scoped>
.video-box {
  display: flex;
  align-items: center;
  flex-flow: wrap;
}
.search-box {
  padding: 20px 0;
  width: 100%;
  display: flex;
  flex-flow: wrap;
}
.search {
  width: 234px;
  height: 40px;
  margin-right: 16px;
}
.btn {
  background: #6384fe;
}
.table-box {
  padding-top: 16px;
}
.view-btn {
  text-align: right;
}
.view-info {
  width: 110px;
  height: 40px;
  border-radius: 4px;
  color: #fff;
}
.active {
  background: #6384fe;
  border: 1px solid #6384fe;
}
.deactive {
  background: #666;
  border: 1px solid #666;
}
.search-btn {
  width: 56px;
  height: 32px;
  border: 1px solid #6384fe;
  color: #6384fe;
  background-color: #fff;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}
.search-btn:hover {
  background-color: #6384fe;
  color: #fff;
}
.check {
  position: absolute;
  z-index: 10;
  right: 2px;
  top: 10px;
}
</style>